<template>
  <div>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="id" label="ID" sortable width="80"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="120">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120">
      </el-table-column>
      <el-table-column label="商品属性" width="120">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="'http://localhost:3000'+scope.row.img"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="specsattr" label="商品属性" width="120">
      </el-table-column>
      <el-table-column label="是否最新" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isnew == 1" type="success">最新</el-tag>
          <el-tag v-else type="danger">不是最新</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否最热" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ishot == 1" type="success">最热</el-tag>
          <el-tag v-else type="danger">不是最热</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row)">修改</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页的逻辑，关键数据有以下几个 -->
    <!-- 数据的总量，有几条数据 totalNum=6 在数据库中，需要发请求 -->
    <!-- 每次显示几条，size 前端决定的 -->
    <!-- 分几页显示完 6÷4=1余2 向上取整 2页显示完整----计算出来的  到这里才可以渲染页面显示分页 -->
    <!-- 当前显示第几页 current 前端可以知道 点击谁显示谁 -->
    <!-- 分页器这里有的问题就是页码数与显示的数据不对 -->
    <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getGoodsCount, getGoodsList, delGoods } from '@/api/index'
export default {
  name: 'MyList',
  data () {
    return {
      tableData: [],
      // 数据的总量，有几条数据
      total: 0,
      // 当前显示第几页
      currentPage: 1,
      // 每页显示几条数据
      pageSize: 20
    }
  },
  methods: {
    async getTableNum () {
      // 获取总数
      const res = await getGoodsCount()
      this.total = res.list[0].total
      this.getReq() // 此时再获取分页的数据
    },
    del (id) {
      this.$confirm('此操作将永久删除，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 点击确定按钮就执行then方法中的内容
          // 此时真的删除了
          const res = await delGoods(id)
          // eslint-disable-next-line
          if (res.code == 200) {
            // 删除成功后的弹窗
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.currentPage = 1
            this.pageSize = 1
            this.getTableNum()
          }
        })
        .catch(() => {
          // 点击确定按钮就执行catch方法中的内容
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    edit (info) {
      // 点击编辑按钮：要通过index组件打开indo组件并传值
      this.$emit('edit', info)
    },
    // 跳转页面
    handleCurrentChange (val) {
      this.currentPage = val // 跳转页面
      this.getReq() // 获取新页面的数据
    },
    async getReq () {
      const res = await getGoodsList({ size: this.pageSize, page: this.currentPage })
      this.tableData = res.list
    }
  },
  created () {
    this.getTableNum()
  }
}
</script>

<style lang="less" scoped>
</style>
